<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/css/bootstrap.css}"/>
    <style type="text/css">
        .registration_detail{
            background-color: white;
            border: 1px solid black;
            height: 40px;
            line-height: 40px;
        }
        .registration_detail input{
            height: 30px;
            text-align: center;
        }
        .registration_add{
            border: 1px solid black;

        }
        #registration_details{
            text-align: center;
        }

    </style>
</head>
<body>

<article class="page-container">
    <form class="form form-horizontal" method="post" id="registrationForm" th:action="${registration eq null} ? 'registration/insert' : 'registration/update'">
        <!-- 隐藏域 ，订单id-->
        <input type="hidden" name="registrationId" th:value="${registration?.registrationId}">

        <div class="row cl">
            <div class="col-xs-5 col-sm-5">
                <label class="form-label col-xs-5 col-sm-5">费用名称：</label>
                <div class="formControls col-xs-7 col-sm-7">
                    <input type="text" class="input-text" th:value="${registration?.registrationType}"  placeholder="" id="registrationType" name="registrationType">
                </div>
            </div>
            <div class="col-xs-2 col-sm-2">
                <input type="hidden" id="subMoneyItem" th:value="${registration?.subMoneyItem}" name="subMoneyItem"></label>
            </div>
            <div class="col-xs-5 col-sm-5">
                <label class="form-label col-xs-5 col-sm-5">金额：</label>
                <div class="formControls col-xs-7 col-sm-7">
                    <input type="text" class="input-text" th:value="${registration?.registerationMoney}"   placeholder="" id="registerationMoney" name="registerationMoney">
                </div>
            </div>
            <div class="col-xs-2 col-sm-2">
                <input type="hidden" id="registerationTotalMoney" th:value="${registration?.registerationTotalMoney}" name="registerationTotalMoney"></label>
            </div>
        </div>

        <div id="registration_details" class="row cl">
            <div  class="col-xs-4 col-xs-4 registration_detail">子费用名称</div>
            <div  class="col-xs-4 col-xs-4 registration_detail">金额</div>
            <div  class="col-xs-4 col-xs-4 registration_detail registration_add">
            <span style="font-size: 15px;cursor: pointer;color: green"
                  class="glyphicon glyphicon-plus"
                  onclick="add_registration_detail();"></span>
            </div>

            <div  th:if="${registration == null}"  class="registration_detail1" value="" id="registration_detail">
                <div  class="col-xs-4 col-sm-4 registration_detail">
                    <input id="sub1" type="text" name="registrationDetails[][subMoneyName]">
                </div>
                <div  class="col-xs-4 col-sm-4 registration_detail">
                    <input id="sub2" type="text"  name="registrationDetails[][subMoney]">
                </div>
                <div  class="col-xs-4 col-sm-4 registration_detail registration_add">
					<span id="removeSpan" style="font-size: 15px;cursor: pointer;color: red"
                          class="glyphicon glyphicon-remove"
                          onclick="remove_registration_detail(this);"
                    ></span>
                </div>
            </div>

            <div  th:if="${registration != null}" value="value2">
                <div th:each="registrationDetail : ${registration.registrationDetails}" class="registration_detail1">
                <div   class="col-xs-4 col-sm-4 registration_detail">
                    <input id="sub1" type="text" th:value="${registrationDetail.subMoneyName}" name="registrationDetails[][subMoneyName]">
                </div>
                <div  class="col-xs-4 col-sm-4 registration_detail">
                    <input id="sub2" type="text" th:value="${registrationDetail.subMoney}"   name="registrationDetails[][subMoney]">
                </div>
                <div  class="col-xs-4 col-sm-4 registration_detail registration_add">
					<span  style="font-size: 15px;cursor: pointer;color: red"
                          class="glyphicon glyphicon-remove"
                          onclick="remove_registration_detail(this);"
                    ></span>
                </div>
                </div>
            </div>

        </div>

        <div class="row cl">
            <div class="col-xs-12 col-sm-12 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" onclick="operationTotalPrice()" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<script type="text/javascript" th:src="@{lib/jquery/1.11.3/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.serializejson/jquery.serializejson.min.js}"></script>
<script type="text/javascript" th:src="@{lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript">


    $(function(){

        $("#registrationForm").validate({
            rules:{
                registrationType:{
                    required: true,
                    minlength:2
                },
                subMoneyProject:{
                    required: true,
                    min:2
                }
            },
            messages:{
                registrationType:{
                    min:"请输入挂号类型"
                },
                subMoneyProject:{
                    min:"请输入金额"
                }

            },
            submitHandler:function(form){

                var res=sumMoney();

                if (res){
                //格式化表单为JSON数据
                var obj = $("#registrationForm").serializeJSON();
                //将JSON对象转换成json格式的字符串
                var jsonStr = JSON.stringify(obj);
                console.log(typeof obj,obj);
                console.log(typeof jsonStr,jsonStr);

                //使用ajax发送请求
                $.ajax({
                    type:"POST",
                    url:$("#registrationForm").prop("action"),
                    data:jsonStr,
                    //指定ajax提交的内容类型，就是json格式数据
                    contentType:"application/json",
                    success:function (data) {
                        layer.msg(data.msg,{icon:data.code,time:1000},function(){

                            //操作数据成功
                            if(data.code == 1){
                                //先刷新父页面表格（当前页面是adminManager页面弹出来的子页面，所以刷新父页面）
                                parent.refreshTable();
                                //父页面adminManager关闭弹出子页面
                                parent.layer.closeAll();
                            }

                        });
                    }
                })

            }
            }
        })

    })



    var subMoney=0
    /* 计算每一行的 单价*数量=总价 */
    function operationTotalPrice(){

        var inputs=$(".registration_detail1").find("input").each(function () {

            if (($(this).attr("id")) == "sub2"){

                subMoney+= parseFloat($(this).val());
            }

        })

        //将第二个和第三个文本框的内容获取设置给第四个文本框的值
        // var goodsUnitPrices = $(inputs[2]).val();
        // if (goodsNumber > 0 && goodsUnitPrices > 0){
        //     $(inputs[3]).val(goodsNumber * goodsUnitPrices);
        // }

    }

    /**
     * 删除子表单
     * @param obj 删除按钮本身
     */
    function remove_registration_detail(obj){
        if ($(".registration_detail1").length == 1){
            layer.tips("亲，至少保留一个子费用表",$(obj));
            return false;
        }
        //删除当前按钮的父元素的父元素
        $(obj).parent().parent().remove();

        $("#subMoneyItem").val($(".registration_detail1").length);
    }


    //新增子表单
    function add_registration_detail(){
        //克隆一份订单明细
        var registrationDetailClone = $(".registration_detail1").first().clone();
        //清除所有表单元素的数据
        registrationDetailClone.find("input").val("");
        if (registrationDetailClone.find("input") == 1){
            subMoneyItem == 1;
        }

        //追加外层div id=registration_detail
        $("#registration_details").append(registrationDetailClone);

        $("#subMoneyItem").val($(".registration_detail1").length);

    }

    //计算挂号费 registration表的registerationMoney + registration_detail表的subMoney，即registerationMoney+subMoney
    function sumMoney() {
       var money= $("#registerationMoney").val();

       // console.log(money)
        var totalMoney = parseFloat(money) + parseFloat(subMoney);
        // console.log(totalMoney)
        $("#registerationTotalMoney").val(totalMoney)

        return true;
    }

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>